// 日报组件
<template>
  <div class="daily">
    <div class="dailyLefts" :class="[{ move: updateFlag }]">
      <p class="title">{{ updateFlag == true ? "编辑" : "填写" }}日报</p>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="项目名称" prop="projectName">
          <el-select
            v-model="ruleForm.projectName"
            placeholder="请选择项目名称"
            style="width: 100%"
          >
            <el-option
              :label="item.project_name"
              :value="item.project_name"
              v-for="(item, index) in projectList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作内容" prop="workContent">
          <el-input
            type="textarea"
            :rows="4"
            v-model="ruleForm.workContent"
          ></el-input>
        </el-form-item>
        <el-form-item label="工作进度" prop="workProcess">
          <el-radio-group v-model="ruleForm.workProcess">
            <el-radio :label="1">完成</el-radio>
            <el-radio :label="2">未完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提 交</el-button>
          <el-button
            type="primary"
            @click="updateFlag = false"
            v-if="updateFlag == true"
            >填写日报</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="dailyRights">
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="index == 0 ? '待审核' : index == 1 ? '通过' : '驳回'"
          :name="index + ''"
          v-for="(item, index) in dailyList"
          :key="index"
        >
          <el-table :data="item" style="width: 100%" height="300px">
            <el-table-column prop="nick_name" label="昵称"> </el-table-column>
            <el-table-column
              prop="project_name"
              label="项目名"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="work_content"
              label="工作内容"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column prop="day_id" label="时间"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="updateDailyList(scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="deleteDailyList(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dailyId: "",
      projectList: [],
      updateFlag: false,
      activeName: "0",
      dailyList: [[], [], []],
      ruleForm: {
        projectName: "",
        workContent: "",
        workProcess: "",
      },
      rules: {
        projectName: [
          { required: true, message: "请选择项目", trigger: "blur" },
        ],
        workContent: [
          { required: true, message: "请输入工作工作内容", trigger: "blur" },
        ],
        workProcess: [
          { required: true, message: "请选择工作完成情况", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getProjectList();
    this.getDailyList();
  },
  methods: {
    updateDailyList(val) {
      this.updateFlag = true;
      this.ruleForm.projectName = val.project_name;
      this.ruleForm.workContent = val.work_content;
      this.ruleForm.workProcess = val.work_process;
      this.dailyId = val.id;
    },
    deleteDailyList(id) {
      this.$http({
        url: this.$http.adornUrl("/business/edailypaper/delete"),
        method: "get",
        params: this.$http.adornParams({
          id: id,
        }),
      }).then(({ data }) => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1000,
        });
        this.getDailyList();
      });
    },
    getDailyList() {
      this.dailyList = [[], [], []];
      this.$http({
        url: this.$http.adornUrl("/business/edailypaper/query"),
        method: "get",
        params: this.$http.adornParams({
          userId: "",
          auditStatus: "",
          pageSize: 999,
        }),
      }).then(({ data }) => {
        data.page.records.forEach((el) => {
          if (el.audit_status == 0) {
            this.dailyList[0].push(el);
          } else if (el.audit_status == 1) {
            this.dailyList[1].push(el);
          } else {
            this.dailyList[2].push(el);
          }
        });
        console.log(this.dailyList);
      });
    },
    getProjectList() {
      this.$http({
        url: this.$http.adornUrl("/business/eproject/query"),
        method: "get",
        params: this.$http.adornParams({
          userId: "",
          pageSize: 999,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.projectList = data.page.records;
        }
      });
    },
    onSubmit() {
      var nowDate = new Date();
      var year = nowDate.getFullYear();
      var month =
        nowDate.getMonth() + 1 < 10
          ? "0" + (nowDate.getMonth() + 1)
          : nowDate.getMonth() + 1;
      var day =
        nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
      var dateStr = year + month + day;
      console.log(dateStr);
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/business/edailypaper/${!this.updateFlag ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              id: this.updateFlag == true ? this.dailyId : "",
              userId: localStorage.getItem("userId"),
              departmentId: localStorage.getItem("departmentId"),
              dayId: dateStr,
              projectName: this.ruleForm.projectName,
              workContent: this.ruleForm.workContent,
              workProcess: this.ruleForm.workProcess,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "提交成功",
                type: "success",
                duration: 1000,
              });
              this.getDailyList();
              this.$refs["ruleForm"].resetFields();
              this.updateFlag = false;
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.daily {
  width: 1000px;
  overflow: hidden;
  height: 400px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 #d3dce6;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  border-radius: 5px;
  .move {
    animation: moveDaily 1s;
  }
  .move1 {
    animation: moveDaily 1s;
  }
  @keyframes moveDaily {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .dailyLefts {
    width: 290px;
    height: 100%;
    .title {
      margin-left: 20px;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .dailyRights {
    width: 690px;
    height: 100%;
  }
}
</style>
